<template>
   <div class="cnyzs-system-management" :class="{ hideAlanoneupLogin: state.isShow }" @click="clickOut">
      <div class="loginContent" :class="{ loginContenthide: state.isShow }">
         <div class="zzz">
            <div class="left">
               <div class="touxiang">
                  <el-image style="width: 100%; height: 100%" :src="SystemData.SystemInfo.systemCover" fit="cover" />
               </div>
               <ul>
                  <li :class="{ liactive: state.active === 0 }" @click="state.active = 0">
                     <span class="iconfont icon-xitongshezhi"></span>
                     <span>系统基础信息</span>
                  </li>
                  <li :class="{ liactive: state.active === 4 }" @click="state.active = 4">
                     <span class="iconfont icon-wode"></span>
                     <span>系统配置选项</span>
                  </li>
                  <li :class="{ liactive: state.active === 7 }" @click="state.active = 7">
                     <span class="iconfont icon-wode"></span>
                     <span>系统公告设置</span>
                  </li>
                  <li :class="{ liactive: state.active === 2 }" @click="state.active = 2">
                     <span class="iconfont icon-wode"></span>
                     <span>系统分类设置</span>
                  </li>
                  <li :class="{ liactive: state.active === 5 }" @click="state.active = 5">
                     <span class="iconfont icon-wode"></span>
                     <span>管理权限分配</span>
                  </li>
                  <li :class="{ liactive: state.active === 1 }" @click="state.active = 1">
                     <span class="iconfont icon-wode"></span>
                     <span>内容审核管理</span>
                  </li>
                  <li :class="{ liactive: state.active === 6 }" @click="state.active = 6">
                     <span class="iconfont icon-wode"></span>
                     <span>系统成员管理</span>
                  </li>
                  <li :class="{ liactive: state.active === 3 }" @click="state.active = 3">
                     <span class="iconfont icon-wode"></span>
                     <span>请求操作日志</span>
                  </li>
               </ul>
            </div>
            <div class="right">
               <!-- 基礎信息設置 -->
               <BasicSettingVue v-if="state.active === 0" :SystemData="SystemData" />
               <!-- 據點配置选项 -->
               <ConfigurationOptionsVue v-if="state.active === 4" :SystemData="SystemData" />
               <!-- 據點公告設置 -->
               <AnnouncementVue v-if="state.active === 7" :SystemData="SystemData" />
               <!-- 據點分類設置 -->
               <ClassifyVue v-if="state.active === 2" :SystemData="SystemData" />
               <!-- 成员权限管理 -->
               <MemberPermissionsVue v-if="state.active === 5" :SystemData="SystemData" />
               <!-- 據點审核管理 -->
               <ContentAuditVue v-if="state.active === 1" :SystemData="SystemData" />
               <!-- 系统成员管理 -->
               <membersVue v-if="state.active === 6" :SystemData="SystemData" />
               <!-- 據點操作日志 -->
               <div v-if="state.active === 3">

               </div>
            </div>
         </div>
      </div>
   </div>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import BasicSettingVue from './basic-setting.vue'
import ConfigurationOptionsVue from './configuration-options.vue'
import AnnouncementVue from './announcement.vue'
import ContentAuditVue from './content-audit.vue'
import ClassifyVue from './classify.vue'
import membersVue from './members.vue'
import MemberPermissionsVue from './member-permissions.vue'
const { managementShow } = storeToRefs(cnyzsCommonpinia())
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: [],
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
})

// 响应数据
const state: any = ref({
   isShow: false,
   active: 0,
})


// 关闭登录框
const clickOut = (e: MouseEvent) => {
   const target = e.target as HTMLElement
   if (target.className === 'cnyzs-system-management') {
      state.value.isShow = true
      setTimeout(() => { managementShow.value = false; state.value.isShow = false }, 290)
   }
}

// 获取待审核列表
const getAuditlist = async () => {
   const res: any = await cnyzsRequest('/api/posts-queryAudit', {
      method: 'POST', data: {
         sns_url: props.SystemData.SystemInfo.systemSign,
         limit: 10,
         page: 1
      }
   })
   console.log("res", res);
}
// getAuditlist()


</script>
<style lang="scss" scoped>
.cnyzs-system-management {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 1000;
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   overflow: hidden;
   animation: show 0.3s ease-in-out;
   padding: 0 18px;

   .loginContent {
      width: 1000px;
      height: 650px;
      padding: 25px 30px;
      border-radius: 15px;
      overflow: hidden;
      animation: loginContentshow 0.3s ease-in-out;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 2px solid #fff;
      background: rgba(255, 255, 255, 0.90);
      backdrop-filter: blur(30px);
      background-color: #d0d0d0;
      background-image: url('https://alan-1252409695.cos.ap-guangzhou.myqcloud.com/images%2Fwallhaven-nko7em%20(1).png');
      background-repeat: no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow: 0 0 40px 0 rgba(58, 58, 58, 0.585);
      position: relative;

      .zzz {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, #ffffffdb, hsla(0, 0%, 100%, 0));
         font-size: 16px;
         display: flex;

         .left {
            width: 240px;
            height: 100%;

            .touxiang {
               width: 80px;
               height: 80px;
               margin: 20px auto 0;
               border-radius: 10px;
               // border: 3px solid var(--aoir-color-primary);
               overflow: hidden;
               box-shadow: 0 0 35px 0 rgb(108 108 108 / 56%);
            }

            ul {
               width: 100%;
               padding-top: 20px;
               padding: 20px 10px;

               li {
                  width: 100%;
                  height: 48px;
                  border-radius: 4px;
                  color: #333;
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  padding: 0 20px;
                  background-color: rgb(255 255 255 / 37%);
                  color: #555;
                  margin-bottom: 10px;

                  .iconfont {
                     font-size: 22px;
                     margin-right: 15px;
                  }
               }

               .liactive {
                  background-color: var(--aoir-color-primary);
                  color: #FFF;
               }
            }
         }

         .right {
            flex: 1;
            height: 100%;
            background-color: #ffffff8a;
            display: flex;
            flex-direction: column;
            padding: 20px;
            overflow: auto;
         }
      }
   }

   .loginContenthide {
      animation: loginContenthide 0.3s ease-in-out;
   }

   @keyframes loginContentshow {
      0% {
         opacity: 0;
         transform: translateY(-10%);
      }

      100% {
         opacity: 1;
         transform: translateY(0);
      }
   }

   @keyframes loginContenthide {
      0% {
         opacity: 1;
         transform: translateY(0);
      }

      100% {
         opacity: 0;
         transform: translateY(-10%);
      }
   }
}

@keyframes show {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.hideAlanoneupLogin {
   animation: hide 0.3s ease-in-out;
}

@keyframes hide {
   0% {
      opacity: 1;

   }

   100% {
      opacity: 0;
   }
}
</style>